/*
 * @Author: wangqizhang
 * @Date: 2024-05-03 13:53:33
 * @LastEditors: wangqizhang
 * @LastEditTime: 2024-05-12 14:14:36
 * @FilePath: /suixinji-react/src/page/home/components/footer/comp/AddGroup.tsx
 * @Description:
 *
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
 */
import { useRef, useContext } from 'react';
import { Button, Form, Input, Modal, message } from 'antd';
import { addGroup } from '../../../../../api';
import MyContext from '../../../context';
type FieldType = {
  group_name: string;
  group_icon: string;
  group_tag: string;
};
const AddGroup = (props: any) => {
  const context: any = useContext(MyContext);

  const formRef = useRef<any>(null);
  const { open, onCancel } = props;
  const handleOk = () => {
    formRef.current.validateFields().then(async (values: any) => {
      const res = await addGroup(values);
      if (res.code === '0000') {
        message.success('添加成功');
        formRef.current.resetFields();
        if (values.group_id === '1111') {
          context.refreshMenu();
        }
        onCancel();
      } else {
        message.error(res.message);
      }
    });
  };
  return (
    <Modal
      open={open}
      title="添加分组"
      onCancel={onCancel}
      cancelText="取消"
      okText="确定"
      onOk={handleOk}
    >
      <Form
        ref={formRef}
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        autoComplete="off"
        labelAlign="left"
      >
        <Form.Item<FieldType>
          label="分组名称"
          name="group_name"
          rules={[{ required: true, message: '请输入分组名称!' }]}
        >
          <Input placeholder="请输入分组名称" />
        </Form.Item>
        <Form.Item<FieldType> label="分组标签" name="group_tag">
          <Input placeholder="请输入分组标签" />
        </Form.Item>
        <Form.Item<FieldType> label="分组图标" name="group_icon">
          <Input placeholder="请输入分组图标" />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default AddGroup;
